<template>
	<view class="checkstand">
		<g-navbar title="收银台"></g-navbar>
		<view class="main" v-if="orderDetail">
			<view class="order-info-container">
				<view class="cost-detail-wrapper">
					<view class="cost-detail-top">
						<view class="cost-unit">
							￥
						</view>
						<view class="cost-value">
							{{orderDetail.total_price}}
						</view>
					</view>
					<view class="cost-label">
						应付费用
					</view>
				</view>
				<view class="order-info-bottom-container">
					<view class="order-info-item">
						<view class="label">
							付费项目
						</view>
						<view class="content">
							{{orderDetail.product_name}}
						</view>
					</view>
					<view class="order-info-item">
						<view class="label">
							购买时间
						</view>
						<view class="content">
							{{orderDetail.submit_time}}
						</view>
					</view>
					<view class="order-info-item">
						<view class="label">
							支付单号
						</view>
						<view class="content">
							{{orderDetail.order_num}}
						</view>
					</view>
				</view>
			</view>
			<goodsOrderItem v-if="orderDetail" :topText="`订单号${orderDetail.order_num}`" :statusLabel="orderStatus.name"
				:statusColor="orderStatus.color" :statusBgcolor="orderStatus.bgColor"
				:goodsName="orderDetail.product_name" :goodsDesc="orderDetail.dec"
				:goodsImage="orderDetail.product_images" style="margin-bottom: 24rpx;margin-top: 24rpx;">
				<template v-slot:info-bottom>
					<view class="order-info">
						<view class="goods-price">
							商品数量：{{orderDetail.product_num}}
						</view>
						<view class="total-price">
							<view class="label">
								合计：
							</view>
							<view class="value">
								￥{{orderDetail.total_price}}
							</view>
						</view>
					</view>
				</template>
			</goodsOrderItem>
			<view class="payment-pattern-container">
				<view class="title">
					支付方式
				</view>
				<view class="payment-pattern-item">
					<view class="item-left">
						<image :src="global.payOptionList[orderDetail.pay_type].icon"
							style="margin-right:16rpx;width:48rpx;height:48rpx;" />
						<view class="pattern-name">
							{{global.payOptionList[orderDetail.pay_type].name}}
						</view>
					</view>
					<!-- 	<u-checkbox-group>
						<u-checkbox :value="true" />
					</u-checkbox-group> -->
				</view>
			</view>
			<g-button :btn_text="btnText" :width="686" :height="96" style="margin-top: 64rpx;"
				@click="orderDetail.pay_status == PAY_STATUS.UNPAY?pay(orderDetail.pay_type):jumpDetail(orderDetail.order_num)" :disabled="isPaying"></g-button>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { onLoad } from '@dcloudio/uni-app';
	import { reactive, Ref, ref, computed } from "vue";
	import { useStore } from 'vuex';
	import REST_URL from '@/http/http.restUrl';
	import { IMasterOrderDetail } from './types';
	import global from '@/global';
	import { PAY_STATUS, PAY_WAY_TYPE } from '@/enum/pay';
	import { usePay } from '@/hooks/usePay';
	import { ROUTE_TYPE } from '@/enum/router';
	import goodsOrderItem from '@/components/goods_order_item/goodsOrderItem';
	import { GET_STORE_USERINFO } from '@/store/gettersType';
	import { useUserData } from '@/hooks/useUserData';
	
	const { updateUserInfo } = useUserData();

	const orderNum : Ref<string> = ref('');

	const orderDetail : Ref<IMasterOrderDetail | null> = ref(null);

	const wx_code : Ref<string> = ref('');

	const isPaying : Ref<boolean> = ref(false);


	const store = useStore();


	const btnText = computed(() => {
		if (!orderDetail.value) return '立即支付';
		if (isPaying.value) {
			return '支付中'
		} else if (orderDetail.value.pay_status == PAY_STATUS.UNPAY) {
			return '立即支付';
		} else {
			return '查看订单详情'
		}
	})



	onLoad(async (e) => {
		const searchParams = new URL(window.location.href).searchParams;
		const params = Object.fromEntries(searchParams);
		console.log(params)
		wx_code.value = params.code;
		if (wx_code.value) {
			isPaying.value = true;
		}
		orderNum.value = e!.orderNum;
		// if(e.isFail){
		// 	uni.prompt.$showToast('支付失败');
		// }
		await getOrderDetail();
		if (wx_code.value) {
			toWXPay();
		}
	})


	const orderStatus = computed(() => {
		if (!orderDetail.value) return null
		if (orderDetail.value.pay_status === PAY_STATUS.PAID) {
			return global.deliverStatusList[orderDetail.value.logistics]
		} else {
			return global.payStatusList[orderDetail.value.pay_status]
		}
	})

	const getOrderDetail = async () => {
		await uni.loginManger.$interceptor;
		const result : IMasterOrderDetail = (await uni.http.POST(REST_URL.getOrderDetail, {
			customer_id: store.getters[GET_STORE_USERINFO].id,
			order_num: orderNum.value,
		})).data.master_order;
		orderDetail.value = result;
		// if(orderDetail.value.pay_status === PAY_STATUS.)
	}

	const pay = async (payType : PAY_WAY_TYPE) => {
		switch (payType) {
			case PAY_WAY_TYPE.WECHAT:
				global.authorization(`/pages_mall/checkstand/checkstand?orderNum=${orderNum.value}`);
				break;
			case PAY_WAY_TYPE.ALIPAY:
				break;
		}
	}


	const jumpDetail = (orderNum : string) => {
		updateUserInfo();
		uni.router.route({
			url: '/pages_mall/order_detail/orderDetail',
			type: ROUTE_TYPE.REDIRECTTO,
			params: {
				orderNum
			},
			success: () => {
				global.resetWebUrl(`/pages_mall/order_detail/orderDetail?orderNum=${orderNum}`);
			}
		})
	}

	const toWXPay = async () => {
		try {
			const { openid } = (await uni.http.POST(REST_URL.getWXOpenid, { code: wx_code.value })).data;
			const { wxPay } = usePay();
			console.log('openid=====>', openid);
			await wxPay(orderDetail.value!.total_price, orderDetail.value!.order_num, openid);
			jumpDetail(orderDetail.value!.order_num);
			// window.location.replace(`${store.state.website}/pages_mall/order_detail/orderDetail?orderNum=${orderDetail.value!.order_num}`);

		} catch (e) {
			console.log('微信支付error====>', e);
			uni.prompt.$showToast(`支付失败`);
			// window.location.replace(`${store.state.website}/pages_mall/checkstand/checkstand?orderNum=${orderDetail.value!.order_num}&isFail=${true}`);
			global.resetWebUrl(`/pages_mall/checkstand/checkstand?orderNum=${orderDetail.value!.order_num}`);
			isPaying.value = false;
		}
	}
</script>

<style scoped lang="scss">
	@import "./checkstand.scss";
</style>